<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link href="/demo.css" rel="stylesheet" />
		<link
			href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
			rel="stylesheet"
		/>
		<!--ssr-head-->
	</head>
	<body>
		<div id="root"><!--ssr-body--></div>

		<script type="module">
			import { mount } from 'ripple';
			import { App } from '/src/App.ripple';
			import { createReactCompat } from '@ripple-ts/compat-react';

			mount(App, {
				target: document.getElementById('root'),
				compat: {
					react: createReactCompat(),
				},
			});

			// import { createRoot } from 'react-dom/client';
			// import { RippleRoot } from '@ripple-ts/compat-react';
			// import { jsx } from 'react/jsx-runtime';
			// import { App } from '/src/App.tsx';

			// const domNode = document.getElementById('root');
			// const root = createRoot(domNode);
			// root.render(jsx(RippleRoot, { children: jsx(App, {}) }));
		</script>
	</body>
</html>
